<!--
    group: 公共组件
    name: 提交法人实名验证手机号
-->
<template>
  <a-modal
    :width="1000"
    :footer="null" :closable="false"
    :keyboard="false"
    :maskClosable="false"
    v-model="visible"
  >
    <h3>该企业尚未提交法人实名手机号，无法完成法人认证，请先提交法人实名手机号！</h3>
    <a-table bordered
             :loading="loading"
             :pagination="false"
             :columns="columns"
             :dataSource="tableData"
             :scroll="{x:600}"
    >
      <a-form-model
        slot="phone"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        slot-scope="text,record"
      >
        <a-form-model-item prop="phone" v-if="phoneStatus">
          <a-input style="width:100%" v-model="form.phone" placeholder="请输入法人实名手机号" allow-clear @change="onChange" />
        </a-form-model-item>
        <span v-if="!phoneStatus">{{text}}</span>
      </a-form-model>
    </a-table>

    <!--验证手机号成功失败-->
    <div class="common" v-if="alertInfo.isShow">
      <a-alert :type="alertInfo.type" show-icon>
        <span slot="message" :style="{ color: alertInfo.color }">
          {{ alertInfo.message }}
        </span>
      </a-alert>
    </div>

    <div class="desc_btn">
      <a-button v-if="phoneStatus" type="primary" class="btnsLarge" @click="submitPhone">{{ submitText }}</a-button>
      <a-button v-if="!phoneStatus" type="primary" class="btnsLarge" @click="handleCancel">确认</a-button>
      <a class="mLeft" type="config.btnType" @click="handleCancel">关闭</a>
    </div>
  </a-modal>
</template>

<script>
import { queryLegalInfo,updateLegalInfo } from '@/api/invoiceAdminister'
export default {
  name: "entMobileNumber",
  data(){
    return{
      // visible: false,  //控制弹层开关
      loading: false,
      tableData:[],
      columns:[
        {
          title: '企业名称',
          align: 'center',
          width: 150,
          ellipsis: true,
          dataIndex: 'entName',
        },
        {
          title: '法人名称',
          align: 'center',
          width: 100,
          dataIndex: 'legalName',
        },
        {
          title: '法人身份证号',
          dataIndex: 'certNo',
          align: 'center',
          width: 150,
          ellipsis: true,
        },
        {
          title: '法人实名手机号',
          dataIndex: 'phone',
          align: 'center',
          width: 130,
          scopedSlots: {customRender: 'phone'},
        },
      ],
      form:{},
      rules: {
        phone: [
          { required: true, message: '请输入法人实名手机号', trigger: 'blur' },
          { validator: this.validatePhone }
        ]
      },

      alertInfo:{
        isShow: false,
        message: '验证成功！',
        type: 'success',
        color: '#52c41a'
      },
      phoneStatus: true,  //手机号输入和展示
      submitText: '提交验证',
    }
  },
  props:['visible','entId'],
  mounted() {
    if (this.entId){
      this.getTableData();//重置列表
    }
  },
  methods:{
    //input监听事件
    onChange(e) {
      // console.log(e.target.value);
      let val = e.target.value;
      if (!val){
        this.alertInfo.isShow = false;
      }
    },
    //提交验证
    submitPhone(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let params = {};
          params.entId = this.entId;  //企业id
          params.phone = this.form.phone;  //修改修改的手机号码

          updateLegalInfo(params).then(res => {
            if (res.success){
              this.alertInfo.isShow = true;
              if (res.result){
                //成功
                this.phoneStatus = false;
                this.alertInfo.type = 'success';
                this.alertInfo.color = '#52c41a';
                this.alertInfo.message = '验证成功！'
                this.getTableData();//重置列表
                this.phoneStatus = false;
              }else{
                //失败
                this.phoneStatus = true;
                this.alertInfo.type = 'error';
                this.alertInfo.color = '#f5222d';
                this.alertInfo.message = '验证失败  该号码非法人实名手机号，请重新填写！'

                this.submitText = '重新提交';
                this.form = {};
              }
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    //关闭
    handleCancel(){
      this.$emit('legalModalHidden');
    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {};
      params.entId = this.entId;

      queryLegalInfo(params).then(res => {
        if (res.success) {
          // 赋值表格数据
          this.tableData = res.result || [];
          this.loading = false;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    // 校验手机号
    validatePhone(rule,value,callback){
      let mobile = /^(1\d{10})$/;  //手机号
      if (!value || mobile.test(value)){
        callback();
      }else{
        callback("您的手机号码格式不正确!");
      }
    },
  }
}
</script>

<style scoped lang="less">
h3{
  font-weight: bold;
  margin-bottom: 20px;
}
.desc_btn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 30px 0 20px 0;
  text-align: center;
}
.common{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

</style>
